<!-- 登录系统 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="齿轮教育门店后台">
  <meta name="author" content="齿轮教育门店后台">
  <link rel="icon" type="image/png" sizes="16x16" href="">
  <title>齿轮教育门店后台——登录</title>
  <!-- Bootstrap Core CSS -->
  <link href="/assets/ampleadmin-minimal/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <link href="/assets/ampleadmin-minimal/css/style.css" rel="stylesheet">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  <style media="screen">
    html,
    body {
      /* background-color: #2f323e; */
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
      color: #ffffff;
    }
    h3 {
      margin: 0;
      font-size: 24px;
      color: #ffffff;
    }
    .m-login{
      width: 360px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 70px;
    }
    .m-login h3{
      text-align: center;
      margin-bottom: 80px;
    }
    .m-login label{
      font-size: 16px;
    }
    .m-login button{
      height: 40px;
      border-radius: 0;
      margin-top: 70px;
    }
    .danger{
      color: #F54C4C;
      line-height: 30px;
    }
  </style>
</head>

<body>
  <div class="m-login" id="m_main">
    <h3>齿轮教育门店后台</h3>
    <div class="m-login-content">
      <form>
        <div class="form-group">
          <label for="name">登录名：</label>
          <input type="text" class="form-control" id="name" placeholder="请输入" v-model="name">
          <span class="danger" v-if="errorName">{{errorName}}</span>
        </div>
        <div class="form-group">
          <label for="psd">密码：</label>
          <input type="password" class="form-control" id="psd" placeholder="请输入" v-model="psd">
          <span class="danger" v-if="errorPsd">{{errorPsd}}</span>
        </div>
        <button type="button" class="btn btn-block btn-info" @click="toLogin">确认登录</button>
      </form>
    </div>
  </div>
  <script src="/assets/plugins/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="/web/js/vue.min.js" type="text/javascript"></script>
  <script src="/web/js/axios.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#m_main',
      data() {
        return {
          apiUrl: "/dboard/mlogin/signIn ",
          name: "",
          psd: "",
          errorName: "",
          errorPsd: ""
        }
      },
      mounted() {
      },
      watch: {
        name(val){
          if(val){this.errorName = '';}
        },
        psd(val){
          if(val){this.errorPsd = '';}
        }
      },
      methods: {
        toLogin() {
          var that = this;
          if(!that.name){that.errorName = '登录名不能为空！'; return;}
          else if(!that.psd){that.errorPsd = '密码不能为空！';return;}
          else{
            axios.post(that.apiUrl,{
              user_name: that.name,
              password : that.psd
            },{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
              if(res.data.Code == 0){
                // 后台通过账号，返回跳转的链接
                window.location.href = res.data.Data;
              }else{
                that.errorPsd = res.data.Msg;
              }
            }).catch(err => {
              console.log(err);
            })
          }
        }
      }
    })
  </script>
</body>

</html>
